详解js面向对象编程 - trigkit4 - SegmentFault
详解js面向对象编程 - trigkit4 - SegmentFault
nodejs
详解js面向对象编程 - trigkit4 - SegmentFault
ECMA关于对象的定义是：”无序属性的集合，其属性可以包含基本值、对象或者函数。“对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。
在现实生活中，相似的对象之间往往都有一些共同的组成特征。类，实际上是对象的设计蓝图或者制作配方。我们能基于相同的类创建出许多不同的对象，这些对象又会含有各自的属性和方法。
封装主要用于阐述对象中所包含（或封装的内容），它通常由两部分组成：
- 相关的数据（用于存储属性）
- 基于这些数据所能做的事（所能调用的方法）
我们可以通过对象直接量、new关键字和object.create()函数来创建。
对象直接量
创建对象最简单的方法就是在js中使用对象直接量，它是由若干名/值对组成的映射表，名/值对中间用冒号分隔，多个名/值对用逗号分隔。整个映射表用花括号（{}）括起来。
empty = {};//没有任何属性的对象
fruits = {apple:big , orange:yellow};
company = {
CEO : "Tim Cook",//属性名字里有空格，必须用字符串表示
Designer:"Ive";
"for":"all audiences",//"for"是保留字，必须用引号
employees:{
firstname:"David", //这里的属性名都没有引号
lastname:"fill" //这个属性的值是一个对象
}
};
对象里还可以嵌套对象（company里嵌套了employees对象）
new关键字创建对象
关键字new后面跟随一个函数调用，这个函数称为构造函数（constructor），javascript语言核心的原始类型都包含内置的构造函数。
<script ="text/javascript">
obj = Object();//创建一个空对象，和{}一样
arr = Array();//创建一个空数组，和[]一样
</script>
js原型->参照：javascript学习总结（五）原型和原型链详解
由于ECMAScript中无法创建类，因此，开发人员发明了一种函数，用函数来封装以特定接口创建对象的细节：
<script ="text/javascript">
Car = (function{
Car = function(model,year,miles){
.model = model;
.year = year;
.miles = miles;
};
return function(model,year,miles){
return Car(model,year,miles);
}
})();
Benz = Car("Benz",,);
Audi = Car("Audi",,);
</script>
什么时候使用工厂模式?
以下几种情景下工厂模式特别有用：
对象的构建十分复杂
需要依赖具体环境创建不同实例
处理大量具有相同属性的小对象
元素、属性和方法
说到数组，我们常说其中包含的是元素，而当说到对象的时候，我们常会说其中包含的是属性。另外，对象的属性也可以是一个函数，因为函数本身也是一种数据，在这种情况下，我们会称该属性为方法：
<script ="text/javascript">
wolf = {
name :wolffy；
run:function{
alert("wolf,wolf!");
}
}
</script>
调用对象方法
<script ="text/javascript">
parrot = {
name : "bage",
hair : "brown",
say : function{
alert( 'I am ' + parrot.name);
}
}
parrot.say();
</script>
注：
- 尽量使用点号表示法来访问对象的属性和方法。
- 不要在对象中使用带引号的属性标示。
构造器函数
另外，我们还可以使用构造器函数的方式来创建对象。看下面一个例子：
<script ="text/javascript">
function Person(name,age,occupation){
.name = name;
.age = age;
.occupation = occupation;
.sayName = function{
alert(.name);
}
}
person1 = Person("trigkit4",,"student");
person2 = Person("Jack",,"Engineer");
</script>
使用构造器函数的好处在于，它可以在创建对象时接收一些参数。按照惯例，构造函数的函数名应始终以一个大写字母开头，以区分普通函数。
构造函数与普通函数的区别在于调用的方式不同，任何函数，只要通过new操作符来调用，那它就可以作为构造函数。
使用构造函数的主要问题是，每个方法都要在每个实例上重新创建一遍。
扩展阅读：javascript学习总结（五）原型和原型链详解
事实上，程序所在的宿主环境一般都会为其提供一个全局对象，而所谓的全局变量其实都只不过是该对象的属性罢了。
例如，当程序所在的宿主环境是web浏览器时，它所提供的全局对象就是window了。
内建对象大致分为三组：
- 数据封装类对象——包括
Object、Array、Boolean、Number和String。这些对象代表着javascript中不同的数据类型，并且都拥有各自不同的typeof返回值，以及undefined和null状态 - 工具类对象——包括Math、Date、RegExp等用于提供遍历的对象
- 错误类对象——包括一般性错误对象及其它各种更特殊的错误类对象
Object是js中所有对象的父级对象，这意味着我们创建的所有对象都继承于此。
所谓的空对象实际上并不是完全无用的，它还是包含了一些属性和方法的：
- 返回构造器函数的构造器属性
- 返回对象描述字符串的toString()方法
- 返回对象单值描述信息的valueOf()方法
o = Object();
o.toString();//[object Object]
Array
Array()是一个用来构建数组的内建构造器函数。数组主要由如下三种创建方式：
array = Array()
array = Array([size])
array = Array(element0, element1, ..., elementN)
Array 对象方法
方法 描述
concat() 连接两个或更多的数组，并返回结果。
() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
() 删除并返回数组的最后一个元素
() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
() 对数组的元素进行排序
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值
concat()方法：合并数组
[,]concat([,],[,]);//[1,2,3,4,5,6]
join()方法：
<script ="text/javascript">
a = [,,];
a.join();// =>"123"
</script>
pop()方法：移除数组最后一个元素，并将其返回
<script ="text/javascript">
fruits = ['apple','banana','pineapple'];
fruits.pop();// pineapple
console.log(fruits);//["apple","banana"]
</script>
shift()方法：删除并返回数组的第一个元素。
<script ="text/javascript">
a = [,,];
a.shift();
console.log(a);//[2,3]
</script>
slice(start,end)方法：截取数组的某一部分，不会对原数组进行任何修改
<script type="text/javascript">
num = [,,,,];
console.log(num.slice(,));[,,]
console.log(num);[,,,,]
</script>
splice(start,delete_count,i1,i2…)方法：删除数组元素的同时添加新的元素。i1,i2为要插入的新元素
<script type="text/javascript">
arr = [,'css','html','php',];
arr.splice(, ,'python','jquery');["css","html"]
console.log(arr);[,"python","jquery""php",]
</script>
Array对象属性
属性 描述
constructor 返回对创建此对象的数组函数的引用。
length 设置或返回数组中元素的数目。
prototype 使您有能力向对象添加属性和方法。
DOM和BOM
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象
有关BOM和DOM的讨论，详见我这篇文章：javascript学习总结（三）BOM和DOM详解
有关函数部分的讨论，详见我这篇文章：javascript学习总结（四）function函数部分
这里讨论下几个js的内建函数：
parseInt() 函数可解析一个字符串，并返回一个整数。
parseInt(string, radix)
radix:进制基数，其默认值是10（即十进制）。
parseInt('10e+3');
parseInt();//NaN
parseInt(,)//255
parseFloat():将接受的参数转换成浮点值并返回。
parseFloat('123.456t');//123.456
isNaN()：该函数是“is Not a Number”的缩写，用于判断其参数是否是一个有效数字，如果是就返回true，否则返回false。
自执行函数：保证全局命名空间不被污染的模式。通过把代码装在一个匿名函数中并立刻自行调用。如此一来，该函数中的所有变量都是局部的（假设使用了var关键字）。
（function{
//code
})();//最后一个圆括号用于执行
有关这部分，也可参加我的另一篇文章：详解js闭��
详见：javascript学习总结（六）数据类型和JSON格式
style对象
style.display = ；是清除`display`样式，`display`将使用默认值（块元素会变成block，内联元素会变成inline）
style.display="none"； 中“none”是一个值，表示元素将隐藏
博主近来穷的吃土了，如果看完本文的内容后觉得对你有所帮助，想博主更新的勤一点，你不扫一下吗（留言你想学的前端技术，博主有空了就更新呦）
<segmentFault/> 
